<template>
	<!-- 提现 -->
	<view class="Withdrawal">
		<view class="content">
			<view class="tit">账户余额将提现到支付宝</view>
			<view class="inp">
				<text>￥</text>
				<input type="text" v-model="form.money" placeholder="请输入提现金额" placeholder-class="inp_val"/>
				<text class="all" @click="form.money = vuex_myinfo.money">全部</text>
			</view>
			<view> 账户余额:￥{{vuex_myinfo.money}} </view>
		</view>
		<view class="list">
			<view>
				<text>真实姓名:</text>
				<input type="text" v-model="form.name" placeholder="请输入真实姓名"/>
			</view>
			<view>
				<text>支付宝账号:</text>
				<input type="text" v-model="form.account" placeholder="请输入支付宝账号"/>
			</view>
			<view>
				<text>手机号:</text>
				<input type="text" v-model="form.mobile" maxlength="11" placeholder="请输入手机号"/>
			</view>
		</view>
		<view class="submit" @click="C_submit">确定</view>
		
		<uni-popup ref="popup" type="center">
			<view class="model">
				<image v-if="vuex_httpImageUrl" :src="vuex_httpImageUrl+'static/my/组casca 1.png'" mode="widthFix"></image>
				<view class="submit" @click="$refs.popup.close()">我知道了</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import yz from '@/common/yz.js'
	export default {
		data() {
			return {
				form:{
					money:'',
					name:'',
					account:'',
					mobile:''
				}
			};
		},
		methods:{
			C_submit(){
				let {money,name,account,mobile} = this.form;
				if(!money){this.$u.toast('请输入提现金额');return};
				if(!name){this.$u.toast('请输入真实姓名');return};
				if(!account){this.$u.toast('请输入支付宝账号');return};
				if(!yz.isMobile(mobile)){this.$u.toast('请输入正确的手机号');return};
				
				this.$u.post('/appuser/add_drawal',{...this.form}).then(res=>{
					console.log(res);
					if(res.code == 0){
						this.$refs.popup.open()
						this.$u.vuex('vuex_myinfo.money',this.vuex_myinfo.money-money)
						
						this.form={
								money:'',
								name:'',
								account:'',
								mobile:''
							}
					}else{
						this.$u.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.Withdrawal{
		.content,.list{
			background-color: #FFFFFF;
			width: 95%;
			margin: 30rpx auto;
			border-radius: 20rpx;
			padding: 30rpx;
		}
		.inp_val{
			font-weight: 100;
			font-size: 35rpx;
		}
		.content{
			.inp{
				margin: 30rpx 0;
				font-weight: bold;
				display: flex;
				align-items: center;
				font-size: 50rpx;
				position: relative;
				border-bottom: 1px solid rgba(0,0,0,.05);
				.all{
					position: absolute;
					top: calc(50% - 25rpx);
					right: 0;
					font-size: 24rpx;
					color: #668DF0;
					border-radius: 20rpx;
					border: 1px solid #668DF0;
					padding: 0rpx 20rpx;
					height: 50rpx;
					line-height: 46rpx;
					z-index: 10;
				}
			}
		}
		.list{
			padding: 0 30rpx;
			>view{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				border-bottom: 1px solid rgba(0,0,0,.05);
				
				input{
					text-align: right;
				}
			}
		}
		.submit{
			text-align: center;
			padding: 20rpx;
			width: 80%;
			
		}
		.model{
			background-color: #FFFFFF;
			width: 80%;
			margin: auto;
			padding: 50rpx;
			border-radius: 20rpx;
			image{
				max-width: 100%;
				margin: auto;
			}
		}
	}
</style>
